<template>
  <el-container class="container">
    <el-main>
      <el-row class="row" justify="center" align="middle" style="width: 300px; margin: auto">
        <el-form label-position="right" label-width="80px" :rules="rules" :model="form" ref="formRef">
          <h2 style="padding-left: 70px">请填写您的信息</h2>
          <el-form-item label="QQ号码" prop="testerQq">
            <el-input v-model="form.testerQq"></el-input>
          </el-form-item>
          <el-form-item label="邀请人QQ" prop="inviterQq">
            <el-input v-model="form.inviterQq"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="doSubmit(formRef)">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { ElForm } from 'element-plus'
import { reactive, ref } from 'vue'
import { createTest } from '@/api/test'
import { useRouter } from 'vue-router'

const router = useRouter()
const loading = ref(false)
type FormInstance = InstanceType<typeof ElForm>
const formRef = ref<FormInstance>()
const rules = {
  testerQq: [{
    required: true,
    message: '请输入QQ',
    trigger: 'change'
  }],
  inviterQq: [{
    required: false
  }]
}
const form = reactive({
  testerQq: '',
  inviterQq: ''
})
const doSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      loading.value = true
      createTest(form).then(resp => {
        router.push({
          path: '/test',
          query: {
            testId: resp.data.data
          }
        })
      }).finally(() => {
        loading.value = false
      })
    } else {
      return false
    }
  })
}
</script>
<style scoped>
.container {
  height: 600px;
}

.row {
  height: 100%;
}
</style>
